import React, { useEffect, useState } from "react";
import axios from "axios";
import './style.css'
const Index = () => {
  // 容器
  const [list, setList] = useState([]);
  const [nationalBox, setNationalBox] = useState("");
  // 请求函数
  const fetchList = async () => {
    const resp = await axios.get("/maoyan/i/api/getBoxList?date=1&isSplit=true");
    const {num, unit} = resp.data.boxOffice.data.nationalBox
    setList(resp.data.boxOffice.data.list)
    setNationalBox(num + unit)
    console.log(resp.data.boxOffice.data.list)
  };

  // 副作用
  useEffect(() => {
    fetchList();

    const timer = setInterval(() => {
      fetchList();
    }, 3000)

    return () => {
      clearInterval(timer)
    }
  }, []);
  return <div>
    <h2>
      今日大盘：{nationalBox}
    </h2>
    <table className="table">
      <thead>
        <tr>
          <th>影片</th>
          <th>综合票房(万元)</th>
          <th>综合票房(占比)</th>
          <th>排片占比</th>
          <th>排座占比</th>
        </tr>
      </thead>
      <tbody>
        {
          list.map((v, i) => {
            return <tr key={i}>
              <td>
                <div>{v.movieInfo.movieName}</div>
                <div className="litter">{v.movieInfo.releaseInfo} {  v.sumBoxDesc }</div>
              </td>
              <td>{v.boxDesc}</td>
              <td>{v.boxRate}</td>
              <td>{v.showCountRate}</td>
              <td>{v.seatCountRate}</td>
            </tr>
          })
        }
      </tbody>
    </table>
  </div>;
};

export default Index;
